<template>
  <div class="box">
    <div id="myChart" class="myChart"></div>   
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
onMounted(() => {
  const myChart = echarts.init(
    document.getElementById("myChart"),
    "echarts-gl"
  );

  myChart.setOption(option);
  // 设置动画效果代码
  let zoomInterval;
  let secondInterval;
  let secondtimeout;
  function zoomIn() {
    const maxGlobeRadius = ref(35);
    if (option.globe.globeRadius < maxGlobeRadius.value) {
      option.globe.viewControl.autoRotateSpeed = 220
      option.globe.globeRadius += 0.18;
      option.globe.globeOuterRadius += 0.18;
      option.globe.zoom += 0.3;
      requestAnimationFrame(function () {
        myChart.setOption(option);
      });

    } else {
      clearInterval(zoomInterval);
      secondtimeout = setTimeout(function () {
        // option.globe.viewControl.autoRotateDirection = "cw"; // 切换为顺时针旋转
        option.globe.viewControl.autoRotateSpeed = 1000;
        secondInterval = setInterval(function () {
          second();
        }, 14);
      }, 0);

    }
  }

  function second() {
    const maxminGlobeRadius = ref(40);
    if (option.globe.globeRadius < maxminGlobeRadius.value) {
      option.globe.globeRadius += 0.25;
      option.globe.globeOuterRadius += 0.15;
      option.globe.zoom += 0.1;
      myChart.setOption(option);
    } else {
      // setInterval(function(){
      //   option.globe.viewControl.autoRotateSpeed -= 200; // 停止旋转
      // },500)
      option.globe.viewControl.targetCoord = [116.46, 15];
     
      option.globe.viewControl.autoRotateSpeed = 0; // 停止旋转
      // option.globe.viewControl.targetCoord = [116.46, 15];
     
      option.globe.viewControl.distance=105;
      option.globe.globeRadius = 40;
      myChart.setOption(option);
      console.log(option);
      clearInterval(secondInterval);
      clearTimeout(secondtimeout);
      cancelAnimationFrame(requestAnimationFrame);

    }
  }
  // // 每毫秒调用一次zoomIn函数
  zoomInterval = setInterval(function () {
    zoomIn();
  }, 15);
});

// echarts图
var option = {
  backgroundColor: "transparent",
  globe: {
    globeRadius: 10,
    baseTexture: "src/images/earth.png",
    heightTexture: "src/images/bathymetry_bw_composite_4k.png",
  
    viewControl: {
      autoRotateDirection: "ccw",
     
    },
    light: { ambient: { intensity: 0.6 }, main: { intensity: 1 } },
    layers: [
      { type: "blend", blendTo: "emission", texture: "src/images/night.jpg" },
      {
        type: "overlay",
        texture: "",
        shading: "",
        distance: 5,
      },
    ],
    
  },
  series: [ ],
};
</script>
<style  scoped>
* {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  width: 100vw;
  /* 使用视窗宽度的80% */
  height: 100vh;
  /* 使用视窗高度的80% */
  scroll-margin: inherit;
}

.myChart {
  width: 100%;
  /* 使用视窗宽度的80% */
  height: 100%;
  /* 使用视窗高度的80% */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  background-image: none;

}
</style>
